<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击惊喜"/>
<div id="box"></div>
<script>
    var arr=["大乔","小乔","娜美","波多","小苍"];
    var btn =document.getElementById("btn");
    var div=document.getElementById("box");
    btn.onclick=function(){
        var ul=document.createElement("ul");
        div.appendChild(ul);
        for (var i=0;i<arr.length;i++){
            var li=document.createElement("li");
            ul.appendChild(li);
            li.innerText=arr[i];
            li.onmouseover=mouseover;
            li.onmouseout=mouseout;
        }
    }
    function mouseover (){
        this.style.backgroundColor="#ff3040";
    }
    function mouseout(){
        this.style.backgroundColor="";
    }
</script>
</body>
</html>